<!--复杂点的树带按钮-->
<template>
  <div class="app-tree">
    <!-- 复选列表数据 -->
    <el-tree
      ref="writTree"
      :data="treeList"
      node-key="id"
      :highlight-current="true"
      :props="defaultProps"
      class="treeStyle"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      @node-drop="handleDrop"
      :default-expanded-keys="defaultShowNodes"
      @node-click="handleNodeClick"
      draggable
      show-checkbox
    >
      <template #default="{ node, data }">
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @mouseleave="mouseleave(data, $event)"
        >
          <span
            class="nodeStyle"
            @click="singleClick(data)"
            @mouseover="mouseover(data, $event)"
          >{{ node.label }}</span>
          <span class="none black" style="zindex: 100">
            <i @click="() => append(data, node)" class="iconfont icon-tianjia" title="新增"></i>
            <i
              v-if="data.id !== 0"
              @click="() => rename(node, data)"
              class="iconfont icon-bianji"
              title="编辑"
            ></i>
            <i
              v-if="data.id !== 0"
              @click="() => remove(node, data)"
              class="iconfont icon-shanchu"
              title="删除"
            ></i>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script>
//引入消息弹出框
import { ElMessageBox, ElMessage } from "element-plus";
//把数据格式化tree格式数据
import formatTree from "@/utils/formatTree";
//API接口
import api from "@/api";

export default {
  props: {
    treeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      // treeList: [], //树列表
      defaultProps: {
        children: "children",
        label: "label"
      }, //树主要参数
      defaultShowNodes: [] // 这里存放要默认展开的节点 id
    };
  },
  /**
   * 页面挂载函数
   */
  created() {
    //调用Tree方法
    // this.getTreeList();
  },
  mounted() {
    //调用Tree方法
    // this.getTreeList()
  },
  /**
   * 方法
   */
  methods: {
    // /**
    //  * 获取Tree列表
    //  */
    // async getTreeList() {
    //   api.assetCatalog
    //     .treeList()
    //     .then((res) => {
    //       this.treeList = formatTree(res.data, 0);
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.msg);
    //     });
    // },
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(data) {
      //子组件告诉父组件改变值
      this.$emit("handleNodeClick", data);
    },
    /**
     * 树节点展开
     */
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false;
      this.defaultShowNodes.some(item => {
        if (item === data.id) {
          // 判断当前节点是否存在， 存在不做处理
          flag = true;
          return true;
        }
      });
      if (!flag) {
        // 不存在则存到数组里
        this.defaultShowNodes.push(data.id);
      }
    },
    /**
     * 树节点关闭
     */
    handleNodeCollapse(data) {
      this.defaultShowNodes.some((item, i) => {
        if (item === data.id) {
          // 删除关闭节点
          this.defaultShowNodes.length = i;
        }
      });
    },
    /**
     * 拖拽成功完成时触发的事件,，在这里可以将节点拖拽后的顺序返给后端
     */
    handleDrop(draggingNode, dropNode, dropType, event) {
      var paramData = [];
      // 当拖拽类型不为inner,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可
      // 当拖拽类型为inner，说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可
      var data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
      var nodeData =
        dropNode.level == 1 && dropType != "inner" ? data : data.children;
      // 设置父ID,当level为1说明在第一级，pid为0
      nodeData.forEach(element => {
        element.pid = dropNode.level == 1 ? 0 : data.id;
      });
      nodeData.forEach((element, i) => {
        var collection = {
          collectionId: element.id,
          parentId: element.pid,
          sort: i + 1
        };
        paramData.push(collection);
      });
    },
    mouseleave(data, $event) {
      $event.currentTarget.firstElementChild.nextElementSibling.setAttribute(
        "class",
        "nodeSame none"
      );
    },
    mouseover(data, $event) {
      $event.currentTarget.nextElementSibling.setAttribute(
        "class",
        "nodeSame block"
      );
    },
    /**添加节点*/
    append(data) {},
    /** 删除节点*/
    remove(node, data) {
      ElMessageBox.confirm(
        "确认删除该节点" + data.contentsName + "吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {})
        .catch(() => {});
    },
    /**编辑节点*/
    rename(node, data) {},
    singleClick(data) {}
  }
};
</script>

<style lang="less" scoped>
.treeStyle{
  margin-top:10px;
}
</style>
